import React, { useState } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom';

function Day() {
    const [params] = useSearchParams();
    const id = params.get("id");
    const [info, setInfo] = useState({});
    const navigate = useNavigate([])
    const goToOrder = (price, type) => {
        navigate(`/orderList?id=${id}&price=${price}&type=${type}`);
    };

    return (
        <div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <div>
                    <div>{info.start}</div>
                    <div >{"10:00"}</div>
                    <div>09-09 周五</div>
                </div>
                <div >
                    <div>G103</div>

                    <div>耗时 5时38分</div>
                </div>
                <div>
                    <div>{info.end}</div>
                    <div >11:58</div>
                    <div>09-09 周五</div>
                </div>
            </div>

            <div>
                <Collapse
                    accordion
                    style={{ marginTop: 20 }}
                    arrowIcon={(active) =>
                        active ? (
                            <div>
                                有票
                                <span>预定</span>
                            </div>
                        ) : (
                            <div>
                                有票
                                <span>收起</span>
                            </div>
                        )
                    }
                >
                    <Collapse.Panel
                        key="1"
                        title={
                            <div >
                                二等座
                                <span>
                                    <b>￥</b> {info.tick?.secondTick}
                                </span>
                            </div>
                        }
                    >
                        <List>
                            <List.Item

                                arrowIcon={
                                    <div>
                                        <span
                                            onClick={() =>
                                                goToOrder(
                                                    info.tick?.secondTick,
                                                    "二等座"
                                                )
                                            }
                                        >
                                            改签
                                        </span>
                                    </div>
                                }
                            >
                                快速预定
                            </List.Item>
                            <List.Item
                                description=""
                                arrowIcon={
                                    <div>
                                        <span
                                            onClick={() =>
                                                goToOrder(
                                                    info.tick?.secondTick,
                                                    "二等座"
                                                )
                                            }
                                        >
                                            改签
                                        </span>
                                    </div>
                                }
                            >
                                普通预定
                            </List.Item>
                        </List>
                    </Collapse.Panel>

                    <Collapse.Panel
                        key="2"
                        title={
                            <div >
                                一等座
                                <span>
                                    <b>￥</b> {info.tick?.firstTick}
                                </span>
                            </div>
                        }
                    >
                        <List>
                            <List.Item

                                arrowIcon={
                                    <div>
                                        <span
                                            onClick={() =>
                                                goToOrder(
                                                    info.tick?.firstTick,
                                                    "一等座"
                                                )
                                            }
                                        >
                                            改签
                                        </span>
                                    </div>
                                }
                            >
                                快速预定
                            </List.Item>
                            <List.Item
                                description=""
                                arrowIcon={
                                    <div>
                                        <span
                                            onClick={() =>
                                                goToOrder(
                                                    info.tick?.firstTick,
                                                    "一等座"
                                                )
                                            }
                                        >
                                            改签
                                        </span>
                                    </div>
                                }
                            >
                                普通预定
                            </List.Item>
                        </List>
                    </Collapse.Panel>

                    <Collapse.Panel
                        key="3"
                        title={
                            <div >
                                VIP座
                                <span>
                                    <b>￥</b> {info.tick?.vip}
                                </span>
                            </div>
                        }
                    >
                        <List>
                            <List.Item

                                arrowIcon={
                                    <div>
                                        <span
                                            onClick={() =>
                                                goToOrder(
                                                    info.tick?.vip,
                                                    "VIP座"
                                                )
                                            }
                                        >
                                            改签
                                        </span>
                                    </div>
                                }
                            >
                                快速预定
                            </List.Item>
                            <List.Item
                                description=""
                                arrowIcon={
                                    <div>
                                        <span
                                            onClick={() =>
                                                goToOrder(
                                                    info.tick?.vip,
                                                    "VIP座"
                                                )
                                            }
                                        >
                                            改签
                                        </span>
                                    </div>
                                }
                            >
                                普通预定
                            </List.Item>
                        </List>
                    </Collapse.Panel>


                </Collapse>
            </div>
        </div>
    )
}

export default Day